<!DOCTYPE HTML>
<html>
<head>
    <title>文件列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="../static_pc/assets3/css/bs3/dpl-min.css" rel="stylesheet" type="text/css"/>
    <link href="../static_pc/assets3/css/bs3/bui-min.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="../static_pc/upload/css/uploadify.css"/>
    <!-- <link href="../static_pc/assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="../static_pc/assets/css/bui-min.css" rel="stylesheet" type="text/css" /> -->
    <link href="../static_pc/assets/css/page-min.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
    <div class="search-grid-container">
        <div id="grid"></div>
    </div>

    <div id="content" class="hide">
        <form id="J_Form" class="form-horizontal" method="post">
            <input type="hidden" name="bussId">
            <input type="hidden" name="userType">

            <div class="row">
                <div class="control-group span8">
                    <label class="control-label">标题</label>
                    <div class="controls">
                        <input name="title" type="text" class="input-normal control-text">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label">图片</label>
                    <div class="controls  control-row-auto">
                        <input name="fileUrlStr" id="fileUrl" type="hidden">
                        <textarea name="fileName" id="fileName" data-rules="{required:true}" class="control-row4 " readonly></textarea>
                    </div>
                    <div id="fileShow" class="controls">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span15">
                    <label class="control-label">&nbsp;</label>

                    <div class="controls" style="width:110px;height:110px">
                        <img name="file" id="uploadify" type="file"/>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="../static_pc/common/jquery.min-2.1.3.js"></script>
<script type="text/javascript" src="../static_pc/upload/js/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="../static_pc/layer/layer.js"></script>
<script type="text/javascript" src="../static_pc/common/JsUtil.js"></script>
<script type="text/javascript" src="../static_pc/assets/js/bui.js"></script>
<script type="text/javascript" src="../static_pc/assets/js/config.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        init();
        $("#uploadify").uploadify({
            'formData': {'path' : 'PHOTO'},
            'uploader': '../file/uploadOSS', 		//后台处理程序的相对路径
            'swf': '../static_pc/upload/swf/uploadify.swf',  	//flash文件的相对路径
            'height': 25,
            'whith': 100,
            'fileObjName': 'file', 							//设置上传文件名称
            'queueSizeLimit': 999, 							//当允许多文件生成时，设置选择文件的个数，默认值：999
            'fileTypeDesc' : '*.jpg;*.gif;*.png;*.jpeg', 	//用来设置选择文件对话框中的提示文本
            'fileTypeExts' : '*.jpg;*.gif;*.png;*.jpeg', //设置可以选择的文件的类型
            'auto': true, 									//设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传
            'multi': true, 								//设置为true时可以上传多个文件
            'uploadLimit': 999,							//可上传次数，默认值：999
            'fileSizeLimit': '2048000000KB',					//上传文件的大小限制
            'buttonText': '上传图片',							//浏览按钮的文本
            'progressData': 'percentage',						// ‘percentage’ or ‘speed’.
            'method': 'post',
            'debug': false,
            'onUploadProgress': function (file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
            },
            'onUploadSuccess': function (file, data, response) {
                var data = eval('(' + data + ')');
                if (!data.hasError) {
                    var file = data.rows[0];
                    //$("#fileShow").append(file.path+",");
                    if(__JsUtil.isNullOrEmpty($("#fileName").val())){
                        $("#fileName").val(file.fileName);
                        $("#fileUrl").val(file.path+","+file.fileName);
                    }else {
                        $("#fileName").val($("#fileName").val()+ "," + file.fileName);
                        $("#fileUrl").val($("#fileUrl").val()+ ";" + file.path+","+file.fileName);
                    }
                }else{
                    $('#uploadify').uploadify('stop');
                    $('#uploadify').uploadify('cancel', '*');
                    alert(data.error);
                }
            },
            'onUploadError': function (file, errorCode, errorMsg, errorString) {
                layer.msg('The file ' + file.name + ' could not be uploaded: ' + errorString);
            }
        });

    });


    function init(){
        BUI.use(['common/search', 'bui/overlay', 'common/page', 'bui/mask'], function (Search, Grid, Data, Overlay, Mask) {
            var Grid = BUI.Grid, columns = null;
                columns=[
                    {title: '标题', dataIndex: 'title', elCls: 'center'},
                    {
                        title: '图片', dataIndex: '', elCls: 'center', renderer: function (value, obj) {
                        var imgStr = "<img src='http://img.si0086.com/"+obj.url+"' width='110' height='110'/>";
                        return imgStr;
                    }
                    },
                    {
                        title: '发布时间', dataIndex: '', elCls: 'center', renderer: function (value, obj) {
                        var time = (new Date(obj.gmtCreate)).format("yyyy-MM-dd HH:mm:ss");
                        return time;
                    }
                    },
                ]
            var isAddRemote = false,
                    editing = new Grid.Plugins.DialogEditing({
                        contentId: 'content', //设置隐藏的Dialog内容
                        triggerCls: 'btn-edit', //触发显示Dialog的样式
                        editor: {
                            width: 400,
                            //height : 330,
                            title: '上传',
                            success: function () {
                                var edtor = this,
                                        form = edtor.get('form'),
                                        editType = editing.get('editType'),//add 或者 edit
                                        url = "";
                                if (editType == 'add') { //可以根据编辑类型决定url
//                                url = '../file/saveFile';
                                } else {
                                    return false;
                                }
                                //检验
                                form.valid();
                                if (form.isValid()) {
                                    layer.load();
                                    form.ajaxSubmit({ //表单异步提交
                                        url: "../api/imgInfo/saveImgInfo",
                                        dataType: "json",
                                        type: "post",
                                        success: function (data) {
                                            layer.closeAll('loading');
                                            if (data.hasError) { //返回的数据是 {hasError : fasle,error : 'xxxx',field : 'xxx'},也可以是任意格式的数据如 ： {success : false,'error' : 'xxxxx'}
                                                if (data.errType == "NOAUTH") {
                                                    edtor.close();
                                                }
                                                BUI.Message.Alert(data.error, 'warning');
                                            } else {
                                                store.load();
                                                edtor.close();
                                                BUI.Message.Alert(data.error, function () {
                                                    //edtor.close();
                                                }, 'info');
                                            }
                                        },
                                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                                            layer.closeAll('loading');
                                            BUI.Message.Alert("系统繁忙，请稍后" + XMLHttpRequest.status + "," + XMLHttpRequest.readyState + "," + textStatus, 'warning');
                                        }
                                    });
                                }
                            }
                        }
                    }),
                    store = new Search.createStore('../api/imgInfo/loadList', {
                        proxy: {
                            save: { //也可以是一个字符串，那么增删改，都会往那么路径提交数据，同时附加参数saveType
                                /* addUrl : '../data/add.json',*/
                                /* updateUrl : ' ', */
                                /* removeUrl : '../data/del.php' */
                            },
                            method: 'POST'
                        },
                        params: {
                            //配置初始请求的参数
                        },
                        pageIndex: 1,
                        pageSize: 10,
                        autoSync: true //保存数据后，自动更新
                    }),
                    gridCfg = Search.createGridCfg(columns, {
                        forceFit: true,
                        emptyDataTpl: '<div class="centered"><img alt="Crying" src="http://img03.taobaocdn.com/tps/i3/T1amCdXhXqXXXXXXXX-60-67.png"><h2>查询的数据不存在</h2></div>',
                        tbar: { //添加、删除
                            items: [{
                                btnCls: 'button button-small',
                                text: '<i class="icon-plus"></i>上传', handler: addFunction
                            },
                                {
                                    btnCls: 'button button-small',
                                    text: '<i class="icon-remove"></i>删除', handler: delFunction
                                }]
                        },
                        plugins: [editing, BUI.Grid.Plugins.CheckSelection, BUI.Grid.Plugins.AutoFit, Grid.Plugins.ColumnResize] // 插件形式引入多选表格
                    });

            var search = new Search({
                        store: store,
                        gridCfg: gridCfg
                    }),
                    grid = search.get('grid');


            function addFunction() {
                $("#fileShow").empty();
                //$("#fileName").val("");
                var newData = {bussId: "1",userType:"2"}; //标志是新增加的记录
                editing.add(newData, 'data'); //添加记录后，直接编辑
            }

            //删除选中的记录
            function delFunction() {
                var selections = grid.getSelection();
                //alert(JSON.stringify(selections));
                delItems(selections);
            }

            function delItems(items) {
                var ids = [];
                BUI.each(items, function (item) {
                    ids.push(item.id);
                });
                if (ids.length) {
                    BUI.Message.Confirm('确认要删除选中的记录么？', function () {
                        layer.load();
                        $.ajax({
                            url: "../api/imgInfo/removeImgInfo",
                            data: {"ids": ids.toString()},
                            dataType: "json",
                            type: "post",
                            async: true,
                            success: function (data) {
                                if (!data.hasError) {
                                    store.load();
                                } else {
                                    BUI.Message.Alert(data.error, 'warning');
                                }
                                layer.closeAll('loading');
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                layer.closeAll('loading');
                                BUI.Message.Alert("系统繁忙，请稍后" + XMLHttpRequest.status + "," + XMLHttpRequest.readyState + "," + textStatus, 'warning');
                            }
                        });
                    }, 'question');
                } else {
                    BUI.Message.Alert("请选择记录", 'warning');
                }
            }

            //监听事件，删除一条记录
            grid.on('cellclick', function (ev) {
                var sender = $(ev.domTarget); //点击的Dom
                if (sender.hasClass('btn-del')) {
                    var record = ev.record;
                    delItems([record]);
                }
            });

        });
    }
</script>

</body>
</html>  